<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="mt-4 p-5 bg-info text-white rounded">
        <h1>卡片 下拉菜单</h1>
    </div>
    <div class="container">
        <div class="card">
            <div class="card-header">头部</div>
            <div class="card-body">Body</div>
            <div class="card-footer">Footer</div>
        </div>
        <p>标题 、 文本和链接</p>
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">卡片标题</h4>
                <p class="card-body">卡片内容。。。。。。。xxxxxxxxxxxxxxxxx</p>
                <a href="#" class="card-link">引用内容1</a> <a href="#" class="card-link">引用内容2</a>
            </div>
        </div>
        <p>图片卡片</p>
        <div class="card" style="width:200px">
            <img src="src/img/1.png" alt="xx" class="card-img-top" height="150px">
            <div class="card-body">
                <h3 class="card-title">黎明</h3>
                <p class="card-text">四大天王，出演。。。。。。。。。。。。。。。。。。。。</p>
                <button type="button" class="btn btn-primary">Info</button>
            </div>
        </div>

        <p>图片卡片--底部</p>
        <div class="card" style="width:200px">

            <div class="card-body">
                <h3 class="card-title">黎明</h3>
                <p class="card-text">四大天王，出演。。。。。。。。。。。。。。。。。。。。</p>
                <button type="button" class="btn btn-primary">Info</button>
            </div>
            <img src="src/img/1.png" alt="xx" class="card-img-bottom" height="150px">
        </div>
        <p>图片卡片--背景</p>
        <div class="card" style="width:200px">
            <img src="src/img/2.jpg" alt="xx" class="card-img-top" height="150px">
            <div class="card-img-overlay">
                <h3 class="card-title">黎明</h3>
                <p class="card-text">四大天王，出演。。。。。。。。。。。。。。。。。。。。</p>
                <button type="button" class="btn btn-primary">Info</button>
            </div>

        </div>
    </div>
   

</body>

</html>